<script lang="ts" setup>
import { Dictionary } from "@/api/system-api/dictionary/types/dictionary"
import { nextTick, onMounted, ref } from "vue"
import { useDictionaryStoreHook } from "@/store/modules/dictionary"
import { ISelectProps } from "element-plus"
const store = useDictionaryStoreHook()
interface DictionarySelect {
  /**
   * 节点父级id 根据此id获取下拉选项
   */
  parentId: number
}
const selectRef = ref()
const prop = defineProps<Partial<ISelectProps & DictionarySelect>>()
const m = defineModel()
const optionRef = ref<Array<Dictionary>>()
defineOptions({
  inheritAttrs: false
})
defineExpose(
  new Proxy(
    {},
    {
      get(target, key) {
        return selectRef.value?.[key]
      },
      has(target, key) {
        return key in selectRef.value
      }
    }
  )
)
onMounted(async () => {
  nextTick(async () => {
    optionRef.value = await store.getDicList(prop.parentId!)
  })
})
</script>

<template>
  <el-select ref="selectRef" v-bind="prop" v-model="m!">
    <el-option v-for="item in optionRef" :key="item.value" :label="item.name" :value="item.value!" />
    <template v-for="(_, name) in $slots" v-slot:[name]>
      <slot :name="name" />
    </template>
  </el-select>
</template>

<style scoped></style>
